<template>
  <div class="tabbar">
    <div class="nav-bar-bottom fixed bottom-0 w-screen bg-[rgb(255,255,255)] opacity-96">
      <div class="w-100%">
        <!-- <image v-if="isSquare"
               :src="`${cdnUrl}/svgicons/tabbar/tab_sel.svg${imgVersion}`"
               class="-bottom-0rpx pointer-events-none absolute left-0 right-0 h-172rpx w-full"
        /> -->
        <div class="w-full flex justify-between bg-[rgb(255,255,255)] opacity-96"
             style="backdrop-filter: blur(10rpx);">
          <div v-for="item of tabIcons"
               class="relative box-border h-98rpx w-full bg-[rgb(255,255,255)] pt-4rpx text-center text-0 text-hex-999 opacity-96"

               @click="handleTabClick(item)">
            <!-- 广场页面  -->
            <template v-if="isSquare">
              <template v-if="item.id==='square'">
                <div class="nav-square absolute rounded-1/2 bg-[rgb(255,255,255)] p-16rpx opacity-96 -bottom-1rpx"
                     style="border-radius: 50% 50% 0 0;backdrop-filter:blur(10rpx);">
                  <image class="h-80rpx w-80rpx text-hex-948e8c"
                         :src="currTab === item.id ? item.icon1 : item.icon"
                         mode="scaleToFill" />
                </div>
              </template>
              <template v-else>
                <image class="h-60rpx w-60rpx text-hex-948e8c"
                       :src="currTab === item.id ? item.icon1 : item.icon"
                       mode="scaleToFill" />
              </template>
              <template v-if="item.id!=='square'">
                <div class="text-center text-24rpx" :class="{ 'text-hex-F58C0F': currTab===item.id }">{{ item.text }} </div>
              </template>
            </template>
            <!-- 非广场页面  -->
            <template v-else>
              <image
                class="bottom-0 h-60rpx w-60rpx overflow-hidden rounded-1/2 text-hex-948e8c"
                :src="currTab === item.id ? item.icon1 : item.icon"
                mode="scaleToFill"
              />
              <div class="text-center text-24rpx" :class="{ 'text-hex-F58C0F': currTab===item.id }">{{ item.text }} </div>
            </template>
          </div>
        </div>
      </div>
      <div class="safe-bottom relative bg-hex-fff opacity-96" style="backdrop-filter: blur(10rpx);" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/stores/login'

const props = defineProps({
  isShowText: {
    type: Boolean,
    default: false,
  },
})
const loginStore = useLoginStore()
const currRoute = usePage()

let tabIcons = $ref([
  { id: 'index', icon: `${cdnUrl1}/svgicons/tabbar/xy_mall.svg`, icon1: `${cdnUrl1}/svgicons/tabbar/xy_mall_select.svg`, text: '商城' },
  { id: 'health', icon: 'https://qqy-1254346585.cos.ap-nanjing.myqcloud.com/qqy/svgicons/tabbar/health.svg', icon1: `${cdnUrl1}/svgicons/tabbar/help_select1.svg`, text: '健康' },
  { id: 'square', icon: 'https://qqy-1254346585.cos.ap-nanjing.myqcloud.com/qqy/svgicons/tabbar/square.svg', icon1: `${cdnUrl1}/svgicons/tabbar/square1.svg`, text: '广场' },
  { id: 'car', icon: `${cdnUrl1}/svgicons/tabbar/Frame.svg`, icon1: `${cdnUrl1}/svgicons/tabbar/Frame1.svg`, text: '购物车' },
  { id: 'mine', icon: `${cdnUrl1}/svgicons/tabbar/my.svg`, icon1: `${cdnUrl1}/svgicons/tabbar/my_select.svg`, text: '我的' },
])

const formatRoute = (route) =>
{
  switch (route) {
    case 'pages/index':
      return 'index'
    case 'pages/health':
      return 'health'
    case 'pages/square':
      return 'square'
    case 'pages/car':
      return 'car'
    case 'pages/mine':
      return 'mine'
  }
}

let currTab = formatRoute(currRoute.value.route)
const isSquare = $computed(() => {
  return currRoute.value.route === 'pages/square'
})
const getIcon = (item) =>
{
  if (currTab === item.id) {
    return item.iconFilled
  }
  return item.icon
}

const handleTabClick = (item) =>
{
  if (currRoute.value.route === 'pages/square' && item.id === 'square') {
    if (!loginStore.roleId) {
      loginStore.setIsBack(true)
      loginStore.isGoLogin()
      return
    }
    uni.navigateTo({
      url: '/pages-square/publish',
    })
    return
  }
  uni.switchTab({
    url: `/pages/${item.id}`,
  })
}
</script>

<style lang="scss">
.tabbar{
  .safe-bottom{
    height: env(safe-area-inset-bottom); /* 兼容 IOS>11.2 */
  }

  .nav-bar-bottom{
    .nav-square {
      top: -50rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  ::-webkit-scrollbar{
    display: none;
  }
}
</style>

